<template>
	<gradient-background>
		<view class="container">
			<view class="content" v-if="hexagram">
				<!-- 卦象标题 -->
				<view class="hexagram-header">
					<view class="header-background">
						<view class="hexagram-symbol-container">
							<view class="symbol-glow"></view>
							<text class="symbol-text">{{ hexagram.fullSymbol }}</text>
						</view>
						<view class="hexagram-title-info">
							<text class="hexagram-name">{{ hexagram.name }}</text>
							<text class="hexagram-subtitle">{{ hexagram.elementRelation }}</text>
						</view>
					</view>
				</view>
				
				<!-- 卦象基本信息 -->
				<view class="info-cards-container">
					<view class="info-card">
						<view class="card-icon">☰</view>
						<view class="card-content">
							<text class="card-title">上卦</text>
							<text class="card-value">{{ hexagram.upperSymbol }}</text>
							<text class="card-element">{{ hexagram.upperElement }}</text>
						</view>
					</view>
					
					<view class="info-card">
						<view class="card-icon">☷</view>
						<view class="card-content">
							<text class="card-title">下卦</text>
							<text class="card-value">{{ hexagram.lowerSymbol }}</text>
							<text class="card-element">{{ hexagram.lowerElement }}</text>
						</view>
					</view>
					
					<view class="info-card relation-card">
						<view class="card-icon">⚡</view>
						<view class="card-content">
							<text class="card-title">五行关系</text>
							<text class="card-value">{{ hexagram.elementRelation }}</text>
						</view>
					</view>
				</view>
				
				<!-- 卦辞 -->
				<view class="description-card">
					<view class="card-header">
						<view class="header-icon">📜</view>
						<text class="section-title">卦辞</text>
					</view>
					<view class="description-content">
						<text class="text-content">{{ hexagram.description }}</text>
					</view>
				</view>
				
				<!-- 详细解读 -->
				<view class="interpretation-container">
					<view class="section-header">
						<view class="header-icon">🔮</view>
						<text class="section-title">详细解读</text>
					</view>
					
					<view class="interpretation-grid">
						<view class="interpretation-card overall">
							<view class="card-header">
								<view class="aspect-icon">🌟</view>
								<text class="aspect-title">总体运势</text>
							</view>
							<text class="aspect-content">{{ overallInterpretation }}</text>
						</view>
						
						<view class="interpretation-card career">
							<view class="card-header">
								<view class="aspect-icon">💼</view>
								<text class="aspect-title">事业发展</text>
							</view>
							<text class="aspect-content">{{ careerInterpretation }}</text>
						</view>
						
						<view class="interpretation-card relationship">
							<view class="card-header">
								<view class="aspect-icon">💕</view>
								<text class="aspect-title">感情生活</text>
							</view>
							<text class="aspect-content">{{ relationshipInterpretation }}</text>
						</view>
						
						<view class="interpretation-card health">
							<view class="card-header">
								<view class="aspect-icon">❤️</view>
								<text class="aspect-title">健康状况</text>
							</view>
							<text class="aspect-content">{{ healthInterpretation }}</text>
						</view>
					</view>
				</view>
				
				<!-- 建议 -->
				<view class="suggestions-container">
					<view class="section-header">
						<view class="header-icon">💡</view>
						<text class="section-title">行动建议</text>
					</view>
					
					<view class="suggestions-list">
						<view v-for="(suggestion, index) in suggestions" :key="index" class="suggestion-card">
							<view class="suggestion-number">{{ index + 1 }}</view>
							<text class="suggestion-text">{{ suggestion }}</text>
						</view>
					</view>
				</view>
				
				<!-- 操作按钮 -->
				<view class="actions-container">
					<view class="action-button primary-action" @tap="shareDetail" :class="{ disabled: !hexagram }">
						<view class="button-icon">📤</view>
						<view class="button-content">
							<text class="button-title">分享详情</text>
							<text class="button-desc">分享给朋友</text>
						</view>
					</view>
					
					<view class="secondary-actions">
						<view class="action-button secondary-action" @tap="saveRecord" :class="{ disabled: !hexagram }">
							<view class="button-icon">💾</view>
							<text class="button-title">保存记录</text>
						</view>
						
						<view class="action-button secondary-action" @tap="goHome">
							<view class="button-icon">🏠</view>
							<text class="button-title">返回首页</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 错误状态显示 -->
			<view class="error-container" v-else>
				<app-card>
					<view class="error-display">
						<text class="error-text">卦象数据加载失败</text>
						<text class="error-desc">请返回重新起卦</text>
					</view>
				</app-card>
				<view class="error-actions">
					<app-button 
						:text="'返回首页'" 
						type="primary"
						@tap="goHome"
					></app-button>
				</view>
			</view>
		</view>
	</gradient-background>
</template>

<script>
import GradientBackground from '@/components/gradient-background/gradient-background.vue'
import AppCard from '@/components/app-card/app-card.vue'
import AppButton from '@/components/app-button/app-button.vue'
import { Hexagram } from '@/utils/hexagram-service.js'
import { ShareService } from '@/utils/share-service.js'

export default {
	name: 'HexagramDetailPage',
	components: {
		GradientBackground,
		AppCard,
		AppButton
	},
	data() {
		return {
			hexagram: null,
			navigating: false, // 防止重复导航
			shareService: null,
			showShareModal: false
		}
	},
	computed: {
		overallInterpretation() {
			if (!this.hexagram) return '';
			
			const elementRelation = this.hexagram.elementRelation;
			let interpretation = '';
			
			switch (elementRelation) {
				case '比和':
					interpretation = '整体运势平稳，事物发展按部就班。适合维持现状，稳中求进。';
					break;
				case '生发':
					interpretation = '整体运势上升，有贵人相助或外力支持。是开始新事业、新计划的好时机。';
					break;
				case '克制':
					interpretation = '运势中存在阻碍和挑战，需要谨慎应对。但危机中也蕴含着转机。';
					break;
				default:
					interpretation = '运势复杂多变，需要具体问题具体分析。';
			}
			
			return interpretation;
		},
		
		careerInterpretation() {
			if (!this.hexagram) return '';
			
			const name = this.hexagram.name;
			if (name.includes('乾')) {
				return '事业发展强劲，适合主动出击，开拓新的业务领域。';
			} else if (name.includes('坤')) {
				return '事业宜稳扎稳打，重视团队合作，厚德载物。';
			} else if (name.includes('屯')) {
				return '事业起步阶段，困难重重但前景光明，需要坚持不懈。';
			} else {
				return '事业发展需要根据具体情况调整策略，保持灵活变通。';
			}
		},
		
		relationshipInterpretation() {
			if (!this.hexagram) return '';
			
			const elementRelation = this.hexagram.elementRelation;
			switch (elementRelation) {
				case '比和':
					return '感情关系和谐稳定，双方理解包容，宜珍惜现有关系。';
				case '生发':
					return '感情运势良好，单身者有望遇到心仪对象，恋人关系更进一步。';
				case '克制':
					return '感情中可能存在矛盾和冲突，需要更多沟通和理解。';
				default:
					return '感情状况复杂，需要用心经营和维护。';
			}
		},
		
		healthInterpretation() {
			if (!this.hexagram) return '';
			
			const upperElement = this.hexagram.upperElement;
			const lowerElement = this.hexagram.lowerElement;
			
			if (upperElement === '火' || lowerElement === '火') {
				return '注意心脏和血液循环，避免过度劳累，保持心情愉快。';
			} else if (upperElement === '水' || lowerElement === '水') {
				return '注意肾脏和泌尿系统健康，多喝水，避免寒凉。';
			} else if (upperElement === '木' || lowerElement === '木') {
				return '注意肝脏和筋骨健康，适当运动，保持作息规律。';
			} else if (upperElement === '金' || lowerElement === '金') {
				return '注意肺部和呼吸系统健康，避免烟尘污染。';
			} else {
				return '注意脾胃健康，饮食规律，营养均衡。';
			}
		},
		
		suggestions() {
			if (!this.hexagram) return [];
			
			const elementRelation = this.hexagram.elementRelation;
			let suggestions = [];
			
			switch (elementRelation) {
				case '比和':
					suggestions = [
						'保持现有的良好状态，稳中求进',
						'注重内在修养，提升自身能力',
						'与他人和谐相处，建立良好关系'
					];
					break;
				case '生发':
					suggestions = [
						'抓住机遇，积极主动地行动',
						'寻求贵人帮助，借助外力发展',
						'开始新的计划或项目'
					];
					break;
				case '克制':
					suggestions = [
						'谨慎行事，三思而后行',
						'化解矛盾，寻求和谐解决方案',
						'提高警惕，防范潜在风险'
					];
					break;
				default:
					suggestions = [
						'深入分析当前形势',
						'保持灵活变通的态度',
						'寻求专业指导和建议'
					];
			}
			
			return suggestions;
		}
	},
	onLoad(option) {
		this.initData(option);
		this.shareService = new ShareService();
	},
	methods: {
		initData(option) {
			console.log('HexagramDetail - initData:', option);
			
			// 解析卦象数据
			if (option.hexagram) {
				try {
					const hexagramData = JSON.parse(decodeURIComponent(option.hexagram));
					console.log('HexagramDetail - hexagramData:', hexagramData);
					
					this.hexagram = Hexagram.fromObject(hexagramData);
					console.log('HexagramDetail - hexagram created:', this.hexagram);
				} catch (error) {
					console.error('解析卦象数据失败:', error);
					console.error('原始数据:', option.hexagram);
					
					uni.showToast({
						title: '数据解析失败',
						icon: 'none',
						duration: 3000
					});
				}
			} else {
				console.warn('HexagramDetail - 没有提供卦象数据');
				uni.showToast({
					title: '缺少卦象数据',
					icon: 'none',
					duration: 3000
				});
			}
		},
		
		shareDetail() {
			if (!this.hexagram) return;
			this.showShareModal = true;
		},
		
		saveRecord() {
			if (!this.hexagram) return;
			
			// 获取当前时间
			const now = new Date();
			const timeStr = now.toLocaleString();
			
			// 构建记录数据
			const record = {
				hexagram: this.hexagram.toObject(),
				timestamp: now.getTime(),
				timeStr: timeStr
			};
			
			// 获取现有记录
			uni.getStorage({
				key: 'divination_records',
				success: (res) => {
					let records = res.data || [];
					records.unshift(record); // 添加到开头
					
					// 限制记录数量（比如最多保存100条）
					if (records.length > 100) {
						records = records.slice(0, 100);
					}
					
					// 保存更新后的记录
					uni.setStorage({
						key: 'divination_records',
						data: records,
						success: () => {
							uni.showToast({
								title: '记录已保存'
							});
						}
					});
				},
				fail: () => {
					// 第一次保存
					uni.setStorage({
						key: 'divination_records',
						data: [record],
						success: () => {
							uni.showToast({
								title: '记录已保存'
							});
						}
					});
				}
			});
		},
					
		goHome() {
			if (this.navigating) return;
			this.navigating = true;
			uni.switchTab({
				url: '/pages/index/index',
				complete: () => {
					setTimeout(() => {
						this.navigating = false;
					}, 1000);
				}
			});
		},
		
		// 分享相关方法
		handleShareToFriend() {
			const shareData = {
				type: 'hexagram',
				title: `${this.hexagram.name}卦详解`,
				description: this.hexagram.description,
				hexagram: this.hexagram.toObject(),
				path: `/pages/hexagram-detail/hexagram-detail?hexagram=${encodeURIComponent(JSON.stringify(this.hexagram.toObject()))}`
			}
			
			this.shareService.shareToFriend(shareData)
				.then(() => {
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					})
					this.hideShareOptions()
				})
				.catch(error => {
					console.error('分享失败:', error)
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				})
		},
		
		handleShareToMoments() {
			const shareData = {
				type: 'hexagram',
				title: `${this.hexagram.name}卦详解`,
				description: this.hexagram.description,
				hexagram: this.hexagram.toObject(),
				path: `/pages/hexagram-detail/hexagram-detail?hexagram=${encodeURIComponent(JSON.stringify(this.hexagram.toObject()))}`
			}
			
			this.shareService.sh极ToMoments(shareData)
				.then(() => {
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					})
					this.hideShareOptions()
				})
				.catch(error => {
					console.error('分享失败:', error)
					极.showToast({
						title: '分享失败',
						icon: 'none'
					})
				})
		},
		
		handleCopyLink() {
			const shareData = {
				type: 'hexagram',
				title: `${this.hexagram.name}卦详解`,
				description: this.hexagram.description,
				hexagram: this.hexagram.toObject(),
				path: `/pages/hexagram-detail/hexagram-detail?hexagram=${encodeURIComponent(JSON.stringify(this.hexagram.toObject()))}`
			}
			
			this.shareService.copyShareLink(shareData)
				.then(() => {
					uni.showToast({
						title: '已复制到剪贴板',
						icon: 'success'
					})
					this.hideShareOptions()
				})
				.catch(error => {
					console.error('复制失败:', error)
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					})
				})
		},
		
		showShareOptions() {
			if (!this.hexagram) {
				uni.showToast({
					title: '卦象数据不存在',
					icon: 'none'
				});
				return;
			}
			this.showShareModal = true;
		},
		
		hideShareOptions() {
			this.showShareModal = false;
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	padding: 32rpx;
}

.content {
	padding-top: 40rpx;
}

.hexagram-header {
	margin-bottom: 48rpx;
	
	.header-background {
		background: linear-gradient(135deg, #6A82FB 0%, #FC5C7D 100%);
		border-radius: 32rpx;
		padding: 48rpx 32rpx;
		text-align: center;
		position: relative;
		overflow: hidden;
		box-shadow: 0 12rpx 48rpx rgba(106, 130, 251, 0.3);
		
		&::before {
			content: '';
			position: absolute;
			top: -50%;
			left: -50%;
			width: 200%;
			height: 200%;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
			animation: rotate 20s linear infinite;
		}
		
		.hexagram-symbol-container {
			position: relative;
			margin-bottom: 32rpx;
			
			.symbol-glow {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 200rpx;
				height: 200rpx;
				background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
				border-radius: 50%;
				animation: pulse 3s ease-in-out infinite;
			}
			
			.symbol-text {
				font-size: 120rpx;
				line-height: 1;
				color: white;
				text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
				position: relative;
				z-index: 1;
			}
		}
		
		.hexagram-title-info {
			position: relative;
			z-index: 1;
			
			.hexagram-name {
				display: block;
				font-size: 48rpx;
				font-weight: bold;
				color: white;
				margin-bottom: 12rpx;
				text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
			}
			
			.hexagram-subtitle {
				display: block;
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.9);
				font-weight: 300;
			}
		}
	}
}

@keyframes rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes pulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
	50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.6; }
}

/* 信息卡片容器 */
.info-cards-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24rpx;
	margin-bottom: 32rpx;
	
	.info-card {
		background: rgba(255, 255, 255, 0.9);
		border-radius: 24rpx;
		padding: 32rpx 24rpx;
		text-align: center;
		box-shadow: 0 4rpx 16rpx rgba(106, 130, 251, 0.1);
		border: 2rpx solid rgba(106, 130, 251, 0.1);
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.98);
			box-shadow: 0 2rpx 8rpx rgba(106, 130, 251, 0.08);
		}
		
		&.relation-card {
			grid-column: 1 / -1;
		}
		
		.card-icon {
			font-size: 48rpx;
			margin-bottom: 16rpx;
			display: block;
		}
		
		.card-content {
			.card-title {
				display: block;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.7);
				margin-bottom: 8rpx;
			}
			
			.card-value {
				display: block;
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 4rpx;
			}
			
			.card-element {
				display: block;
				font-size: 24rpx;
				color: #6A82FB;
				font-weight: 500;
			}
		}
	}
}

/* 描述卡片 */
.description-card {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 24rpx;
	padding: 32rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 4rpx 16rpx rgba(106, 130, 251, 0.1);
	border: 2rpx solid rgba(106, 130, 251, 0.1);
	
	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		
		.header-icon {
			font-size: 32rpx;
			margin-right: 16rpx;
		}
		
		.section-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}
	
	.description-content {
		.text-content {
			font-size: 30rpx;
			color: #333;
			line-height: 1.8;
			text-align: justify;
		}
	}
}

/* 解读容器 */
.interpretation-container {
	margin-bottom: 32rpx;
	
	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
		
		.header-icon {
			font-size: 36rpx;
			margin-right: 16rpx;
		}
		
		.section-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
		}
	}
	
	.interpretation-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 24rpx;
		
		.interpretation-card {
			background: rgba(255, 255, 255, 0.9);
			border-radius: 20rpx;
			padding: 28rpx;
			box-shadow: 0 4rpx 16rpx rgba(106, 130, 251, 0.1);
			border-left: 6rpx solid #6A82FB;
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.98);
			}
			
			&.overall { border-left-color: #FF6B9D; }
			&.career { border-left-color: #50E3C2; }
			&.relationship { border-left-color: #FF9500; }
			&.health { border-left-color: #BD10E0; }
			
			.card-header {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				
				.aspect-icon {
					font-size: 32rpx;
					margin-right: 12rpx;
				}
				
				.aspect-title {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
				}
			}
			
			.aspect-content {
				font-size: 26rpx;
				color: #666;
				line-height: 1.6;
				text-align: justify;
			}
		}
	}
}

/* 建议容器 */
.suggestions-container {
	margin-bottom: 48rpx;
	
	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
		
		.header-icon {
			font-size: 36rpx;
			margin-right: 16rpx;
		}
		
		.section-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
		}
	}
	
	.suggestions-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		
		.suggestion-card {
			display: flex;
			align-items: flex-start;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 20rpx;
			padding: 24rpx;
			box-shadow: 0 4rpx 16rpx rgba(106, 130, 251, 0.1);
			border: 2rpx solid rgba(106, 130, 251, 0.1);
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.98);
				background: rgba(106, 130, 251, 0.05);
			}
			
			.suggestion-number {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				background: linear-gradient(135deg, #6A82FB 0%, #FC5C7D 100%);
				color: white;
				font-size: 24rpx;
				font-weight: 600;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
				flex-shrink: 0;
			}
			
			.suggestion-text {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				line-height: 1.6;
				text-align: justify;
			}
		}
	}
}

/* 操作按钮容器 */
.actions-container {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
	
	.primary-action {
		background: linear-gradient(135deg, #6A82FB 0%, #FC5C7D 100%);
		color: white;
		box-shadow: 0 8rpx 32rpx rgba(106, 130, 251, 0.3);
		
		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 16rpx rgba(106, 130, 251, 0.2);
		}
		
		&.disabled {
			background: linear-gradient(135deg, #ccc 0%, #999 100%);
			box-shadow: none;
		}
		
		.button-content {
			.button-desc {
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}
	
	.secondary-actions {
		display: flex;
		gap: 24rpx;
		
		.secondary-action {
			flex: 1;
			background: rgba(255, 255, 255, 0.9);
			color: #333;
			border: 2rpx solid rgba(106, 130, 251, 0.2);
			box-shadow: 0 4rpx 16rpx rgba(106, 130, 251, 0.1);
			
			&:active {
				transform: scale(0.98);
				background: rgba(106, 130, 251, 0.05);
			}
			
			&.disabled {
				background: rgba(255, 255, 255, 0.5);
				border-color: rgba(0, 0, 0, 0.1);
				opacity: 0.6;
			}
		}
	}
	
	.action-button {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 32rpx 24rpx;
		border-radius: 24rpx;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
			transition: left 0.5s ease;
		}
		
		&:active::before {
			left: 100%;
		}
		
		.button-icon {
			font-size: 32rpx;
			margin-right: 16rpx;
		}
		
		.button-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.button-title {
				font-size: 28rpx;
				font-weight: 600;
				margin-bottom: 4rpx;
			}
			
			.button-desc {
				font-size: 22rpx;
				opacity: 0.8;
			}
		}
		
		.button-title {
			font-size: 28rpx;
			font-weight: 600;
		}
	}
}

.error-container {
	padding-top: 40rpx;
	
	.error-display {
		text-align: center;
		padding: 40rpx 0;
		
		.error-text {
			display: block;
			font-size: 32rpx;
			color: #000000;
			font-weight: 500;
			margin-bottom: 12rpx;
		}
		
		.error-desc {
			display: block;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.7);
			line-height: 1.6;
		}
	}
	
	.error-actions {
		margin-top: 32rpx;
		display: flex;
		justify-content: center;
	}
}
</style>